﻿<MCard Height="350">
    <MNavigationDrawer Absolute Permanent Right>
        <PrependContent>
            <MListItem TwoLine>
                <MListItemAvatar>
                    <MImage Src="https://randomuser.me/api/portraits/women/81.jpg"></MImage>
                </MListItemAvatar>

                <MListItemContent>
                    <MListItemTitle>Jane Smith</MListItemTitle>
                    <MListItemSubtitle>Logged In</MListItemSubtitle>
                </MListItemContent>
            </MListItem>
        </PrependContent>

        <ChildContent>
            <MList Dense>
                @foreach (var item in _items)
                {
                    <MListItem>
                        <MListItemIcon>
                            <MIcon>@item.Icon</MIcon>
                        </MListItemIcon>

                        <MListItemContent>
                            <MListItemTitle>@item.Title</MListItemTitle>
                        </MListItemContent>
                    </MListItem>
                }
            </MList>
        </ChildContent>
    </MNavigationDrawer>
</MCard>

@code
{
    private class ItemDemo
    {
        public string Title { get; set; }
        public string Icon { get; set; }
    }
    private List<ItemDemo> _items = new()
    {
        new ItemDemo { Title = "Home", Icon = "mdi-home-city" },
        new ItemDemo { Title = "My Account", Icon = "mdi-account" },
        new ItemDemo { Title = "Users", Icon = "mdi-account-group-outline" }
    };
}